<template>
	<n-modal
		v-model:show="showModal"
		title="探店申请审核"
		preset="dialog"
		:show-icon="false"
		:mask-closable="false"
		style="width: 656px"
		@close="handleClose"
	>
		<div class="ll-modal-body">
			<div class="ll-modal-body-top">
				<div class="order-item">
					<span class="ll-title">编号：</span>
					<span>{{ detailInfo.seekNo }}</span>
				</div>
				<div class="order-item">
					<span class="ll-title">提交时间：</span>
					<span>{{ detailInfo.applyTime }}</span>
				</div>
			</div>
			<div class="ll-modal-body-main">
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<HomeOutline />
						</n-icon>
						店铺信息
					</div>
					<div class="ll-card-body">
						<div class="ll-list-item">
							<span class="ll-list-item-title">商品名称：</span>
							<span>{{ detailInfo.productName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">佣金模式：</span>
							<span>{{ detailInfo.commissionTypeNameList }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">佣金额度：</span>
							<span>{{ detailInfo.money }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">推广渠道：</span>
							<span>{{ detailInfo.channelTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">探店要求：</span>
							<span style="flex: 1">{{ detailInfo.requireContent }}</span>
						</div>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<PersonOutline />
						</n-icon>
						主播信息
					</div>
					<div class="ll-card-body">
						<div class="ll-list-item">
							<span class="ll-list-item-title">主播昵称：</span>
							<span>{{ detailInfo.nickName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">推广平台：</span>
							<span>{{ detailInfo.agentChannelTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">账户名称：</span>
							<span>{{ detailInfo.channelAccount }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">渠道粉丝：</span>
							<span>{{ detailInfo.channelFens }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">账户类别：</span>
							<span>{{ detailInfo.channelAccountTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">所在位置：</span>
							<span>{{ detailInfo.province }}{{ detailInfo.city }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">手机号码：</span>
							<span>{{ detailInfo.mobile }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">带货等级：</span>
							<span v-if="detailInfo.cargoLevel">LV{{ detailInfo.cargoLevel }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">带&nbsp;&nbsp;货&nbsp;&nbsp;分：</span>
							<span>{{ detailInfo.cargoPoints }}</span>
						</div>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<ChatboxEllipsesOutline />
						</n-icon>
						申请信息
					</div>
					<div class="ll-card-body">
						<div>
							<span class="ll-list-item-title">探店模式：</span>
							<span>{{ detailInfo.seekTypeVal }}</span>
						</div>

						<div class="ll-list-item" style="margin-bottom: 0">
							<span class="ll-list-item-title">佣金模式：</span>
							<div v-if="!changeCommissionType">
								<span>{{ detailInfo.commissionTypeName }}</span>

								<template v-if="detailInfo.seekType !== 2">
									<span
										v-if="isChangeButton"
										class="ll-change"
										@click="() => (changeCommissionType = true)"
									>
										更改
									</span>
								</template>
							</div>
							<div v-else>
								<n-radio-group v-model:value="detailInfo.commissionType" name="radiogroup1">
									<n-space>
										<n-radio
											v-for="(item, i) in detailInfo.commissionTypeRespList"
											:key="i"
											:value="item.commissionType"
										>
											{{ item.commissionTypeStr }}
										</n-radio>
									</n-space>
								</n-radio-group>
							</div>
							<br />
						</div>

						<div>
							<div style="width: 5px; float: left; height: 10px"></div>
							<div style="width: 14px; height: 14px; float: left">
								<img src="~@/assets/images/icon_tdzx_zy@2x.png" />
							</div>
							<div style="color: #f5894e; font-size: 12px; margin-bottom: 12px; float: left">
								一口价通过人数不得大于10人
							</div>
						</div>

						<div class="ll-list-item" style="align-items: center; clear: both">
							<span class="ll-list-item-title">探店时间：</span>
							<div v-if="!changeExploreTime">
								<span>
									{{ detailInfo.finalExploreTime }} {{ detailInfo.finalExploreTimeScope }}
								</span>
								<span
									v-if="isChangeButton"
									class="ll-change"
									@click="() => (changeExploreTime = true)"
								>
									更改
								</span>
							</div>
							<div v-else style="flex: 1">
								<n-grid x-gap="12">
									<n-gi :span="7">
										<n-date-picker
											v-model:value="detailInfo.finalExploreTimeLong"
											type="date"
											:actions="['clear', 'now']"
											format="yyyy-MM-dd"
											@update:value="updateFinalExploreTimeLong"
										/>
									</n-gi>
									<n-gi :span="15">
										<n-grid>
											<n-gi span="11">
												<n-time-picker v-model:value="detailInfo.Stime" format="HH:mm" />
											</n-gi>
											<n-gi span="2">
												<div class="ll-divide">~</div>
											</n-gi>
											<n-gi span="11">
												<n-time-picker v-model:value="detailInfo.Etime" format="HH:mm" />
											</n-gi>
										</n-grid>
									</n-gi>
								</n-grid>
							</div>
						</div>

						<div class="ll-list-item">
							<span class="ll-list-item-title">探店人数：</span>
							<span>{{ detailInfo.explorePeople }}</span>
						</div>

						<div v-if="detailInfo.seekType !== 2" class="ll-list-item">
							<span class="ll-list-item-title">探店门店：</span>
							<span>{{ detailInfo.exploreStore }}</span>
						</div>

						<div class="ll-list-item">
							<span class="ll-list-item-title">预计发刊：</span>
							<span>{{ detailInfo.publishTime }} {{ detailInfo.publishTimeScope }}</span>
						</div>

						<div v-if="detailInfo.seekType !== 2" class="ll-list-item" style="align-items: center">
							<span class="ll-list-item-title">
								报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：
							</span>
							<div v-if="!changePrice">
								<span>¥{{ detailInfo.price }}</span>
								<span v-if="isChangeButton" class="ll-change" @click="() => (changePrice = true)">
									更改
								</span>
							</div>
							<div v-else>
								<n-input-number
									v-model:value="detailInfo.price"
									style="float: left"
									placeholder="请输入探店报价"
									:autosize="true"
									class="w-240px"
									clearable
								>
									<template #suffix>元</template>
								</n-input-number>
							</div>
						</div>

						<div class="ll-list-item">
							<span class="ll-list-item-title">
								优&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;势：
							</span>
							<span>{{ detailInfo.advantage }}</span>
						</div>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<TimeOutline />
						</n-icon>
						主播历史合作
					</div>
					<div class="ll-card-body">
						<n-data-table
							:columns="columns"
							:style="{ height: '100%', background: '#fff' }"
							:data="totalBoard"
							:bordered="false"
						/>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<GitPullRequestOutline />
						</n-icon>
						审核流程
					</div>
					<n-timeline>
						<n-timeline-item
							v-for="item in approveRecords"
							:key="item.id"
							:title="
								item.result == 1
									? item.approveUserName + '（审批通过）'
									: item.approveUserName + '（审批拒绝）'
							"
							:time="item.approveTime"
						>
							<div class="timeline-content">
								<P>{{ item.approveMessage }}</P>
								<P v-if="item.additionMessage" class="subTitle">{{ item.additionMessage }}</P>
							</div>
						</n-timeline-item>
					</n-timeline>
				</div>
			</div>
		</div>
		<template #action>
			<n-button
				color="rgba(0, 0, 0, 0.1)"
				text-color="#333333"
				size="small"
				@click="showApproveMessage = true"
			>
				驳回
			</n-button>
			<n-button :disabled="disabledBtn" type="primary" size="small" @click="approve(1)">
				确认通过
			</n-button>
		</template>
	</n-modal>
	<n-modal
		v-model:show="showApproveMessage"
		title="驳回原因"
		preset="dialog"
		:show-icon="false"
		:mask-closable="false"
		style="width: 423px"
		@close="handleCloseApproveMessage"
	>
		<n-input
			v-model:value="backMessage"
			type="textarea"
			placeholder="请输入驳回原因"
			show-count
			maxlength="100"
			minlength="1"
		/>
		<template #action>
			<n-button size="small" @click="showApproveMessage = false">关闭</n-button>
			<n-button :disabled="disabledBtn" type="primary" size="small" @click="approve(2)">
				确认驳回
			</n-button>
		</template>
	</n-modal>
</template>

<script setup>
// 导入API接口
import {
	applyDetail,
	auditWithPerson,
	auditWithPosition,
	auditWithVideoPerson,
	updatePriceOrDate,
	auditReviewCheck
} from '@/api/applyReview';
import { ref, reactive, watch, onMounted, h } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import {
	HomeOutline,
	PersonOutline,
	ChatboxEllipsesOutline,
	GitPullRequestOutline,
	TimeOutline
} from '@vicons/ionicons5';
import dayjs from 'dayjs';

const message = useMessage();
const router = useRouter();

const props = defineProps({
	modal: Boolean,
	applyId: {
		typeof: Number,
		default: 0
	}
});

// 更改探店时间
const changeExploreTime = ref(false);
// 更改探店报价
const changePrice = ref(false);
// 更改探店佣金模式
const changeCommissionType = ref(false);
const disabledBtn = ref(false);

const emit = defineEmits(['update:modal', 'commit']);

const showModal = ref(props.modal);
const showApproveMessage = ref(false);
const columns = [
	{
		title: '总带货销量毛利',
		key: 'totalSales',
		render(row) {
			let totalSales = row.totalSales && (row.totalSales / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalSales ? totalSales : '0.00'}`)];
		}
	},
	{
		title: '总合作费用',
		key: 'totalCost',
		render(row) {
			let totalCost = row.totalCost && (row.totalCost / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalCost ? totalCost : '0.00'}`)];
		}
	},
	{
		title: '总抖加费用',
		key: 'totalDouAdd',
		render(row) {
			let totalDouAdd = row.totalDouAdd && (row.totalDouAdd / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalDouAdd ? totalDouAdd : '0.00'}`)];
		}
	},
	{
		title: '总利润',
		key: 'totalProfit',
		render(row) {
			let totalProfit = row.totalProfit && (row.totalProfit / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalProfit ? totalProfit : '0.00'}`)];
		}
	}
];
const totalBoard = ref([]);
//获取审核详情
const detailInfo = ref({
	Stime: null,
	Etime: null,
	finalExploreTime: null,
	finalExploreTimeScope: null,
	finalPrice: null,
	price: null,
	id: null,
	finalExploreTimeLong: null
});
const approveRecords = ref([]);
const backMessage = ref(null);

const getApplyDetail = async () => {
	disabledBtn.value = false;
	const setForm = {
		id: props.applyId
	};
	const res = await applyDetail(setForm);
	if (res.code === 200) {
		// 返回结果数据处理
		const finalExploreTime = res.data.finalExploreTime;
		const TimeScope = res.data.finalExploreTimeScope
			? res.data.finalExploreTimeScope.split('~')
			: null;
		res.data.finalExploreTimeLong = dayjs(finalExploreTime).valueOf();
		res.data.Stime = TimeScope ? dayjs(`${finalExploreTime} ${TimeScope[0]}`).valueOf() : null;
		res.data.Etime = TimeScope ? dayjs(`${finalExploreTime} ${TimeScope[1]}`).valueOf() : null;
		res.data.price = Number(res.data.price);

		detailInfo.value = res.data;
		detailInfo.value.commissionTypeNameList = '';
		let list = res.data.commissionTypeRespList;

		if (list.length > 0) {
			for (let index in list) {
				let item = list[index];

				if (item.commissionType === 1) {
					continue;
				}

				detailInfo.value.commissionTypeNameList += item.commissionTypeStr;
				if (index < list.length - 1) {
					detailInfo.value.commissionTypeNameList += '、';
				}
			}
		}

		console.log(res);
		approveRecords.value = res.data.records;
		totalBoard.value = res.data.totalBoard ? [res.data.totalBoard] : [];
	}
};

const handleClose = () => {
	showModal.value = false;
	showApproveMessage.value = false;
	emit('update:modal', showModal.value);
	// auditWithPersonSend(approveType);
};
const updateFinalExploreTimeLong = () => {
	detailInfo.value.Stime = null;
	detailInfo.value.Etime = null;
};
const surePriceOrDate = async (FocusEvent) => {
	if (!detailInfo.value.finalExploreTimeLong) {
		message.info('没有选择探店日期！');
		return;
	}
	if (!detailInfo.value.Stime) {
		message.info('没有选择开探店始时间！');
		return;
	}
	if (!detailInfo.value.Etime) {
		message.info('没有选择探店结束时间！');
		return;
	}
	console.log(detailInfo.value.price);
	if (!detailInfo.value.price) {
		message.info('没有填写报价！');
		return;
	}
	const Stime = dayjs(detailInfo.value.Stime).format('HH:mm');
	const Etime = dayjs(detailInfo.value.Etime).format('HH:mm');
	const params = {
		id: detailInfo.value.id,
		price: detailInfo.value.price,
		date: dayjs(detailInfo.value.finalExploreTimeLong).format('YYYY-MM-DD HH:mm') + ':00',
		dateScope: `${Stime}~${Etime}`
	};
	const res = await updatePriceOrDate(params);
	if (res.code === 200) {
		message.success('修改成功');
		const Stime = dayjs(detailInfo.value.Stime).format('HH:mm');
		const Etime = dayjs(detailInfo.value.Etime).format('HH:mm');
		detailInfo.value.finalExploreTime = dayjs(detailInfo.value.finalExploreTimeLong).format(
			'YYYY-MM-DD'
		);
		detailInfo.value.finalExploreTimeScope = `${Stime}~${Etime}`;
		changePrice.value = false;
		changeExploreTime.value = false;
		changeCommissionType.value = false;
		emit('commit');
	} else {
		message.error(res.message);
		changePrice.value = false;
		changeExploreTime.value = false;
		changeCommissionType.value = false;
	}
};

const showChangeButtonList = [
	'/apply-review/findListWithPosition',
	'/apply-review/findListWithPositionAdmin',
	'/apply-review/findListReviewCheckAdmin',
	'/apply-review/findListWithPersonAdmin'
];

// 审核
const approve = async (type) => {
	if (type === 2 && !backMessage.value) {
		message.error('驳回原因不能为空');
		return;
	}
	if (!detailInfo.value.finalExploreTimeLong) {
		message.error('没有选择探店日期！');
		return;
	}
	if (!detailInfo.value.Stime) {
		message.error('没有选择开探店始时间！');
		return;
	}
	if (!detailInfo.value.Etime) {
		message.error('没有选择探店结束时间！');
		return;
	}

	if (!detailInfo.value.price && detailInfo.value.price != 0) {
		message.error('没有填写报价！');
		return;
	}
	const Stime = dayjs(detailInfo.value.Stime).format('HH:mm');
	const Etime = dayjs(detailInfo.value.Etime).format('HH:mm');
	if (Etime <= Stime) {
		message.error('探店开始时间必须小于结束时间！');
		return;
	}
	const fullPath = router.currentRoute.value.fullPath;
	const params = {
		commissionType: detailInfo.value.commissionType,
		auditType:
			fullPath === '/apply-review/findListWithPosition' ||
			fullPath === '/apply-review/findListWithPositionAdmin'
				? 1
				: fullPath === '/apply-review/findListWithPerson' ||
				  fullPath === '/apply-review/findListWithPersonAdmin'
				? 2
				: fullPath === '/apply-review/findListReviewCheck' ||
				  fullPath === '/apply-review/findListReviewCheckAdmin'
				? 7
				: -1,
		finalExploreTime:
			detailInfo.value.finalExploreTime == null
				? null
				: dayjs(detailInfo.value.finalExploreTimeLong).format('YYYY-MM-DD HH:mm') + ':00',
		finalExploreTimeScope: `${Stime}~${Etime}`,
		finalPrice: detailInfo.value.price,
		message: type === 2 ? backMessage.value : '',
		result: type,
		seekId: detailInfo.value.id,
		videoKey: null
	};
	let res = null;
	if (
		fullPath === '/apply-review/findListWithPerson' ||
		fullPath === '/apply-review/findListWithPersonAdmin'
	) {
		disabledBtn.value = true;
		res = await auditWithPerson(params);
	} else if (
		fullPath === '/apply-review/findListWithPosition' ||
		fullPath === '/apply-review/findListWithPositionAdmin'
	) {
		disabledBtn.value = true;
		res = await auditWithPosition(params);
	} else if (
		fullPath === '/apply-review/findListReviewCheck' ||
		fullPath === '/apply-review/findListReviewCheckAdmin'
	) {
		console.log(params);
		params.auditType = 7;
		res = await auditReviewCheck(params);
	} else {
		message.error('非法操作！');
		return;
	}
	if (res && res.code === 200) {
		message.success('操作成功');
		backMessage.value = null;
		showApproveMessage.value = false;
		showModal.value = false;

		emit('update:modal', showModal.value);
		emit('commit');
	} else {
		message.error(res.message);
		disabledBtn.value = false;
	}
};
const handleCloseApproveMessage = () => {
	showApproveMessage.value = false;
	emit('update:modal', showModal.value);
};

watch(
	() => ({ ...props }),
	(count) => {
		showModal.value = count.modal;
		if (count.modal) {
			changePrice.value = false;
			changeExploreTime.value = false;
			changeCommissionType.value = false;
			getApplyDetail();
		}
	}
);

const isChangeButton = ref(false);

onMounted(() => {
	const fullPath = router.currentRoute.value.fullPath;
	const status = showChangeButtonList.includes(fullPath);

	isChangeButton.value = status;
});
</script>

<style lang="less" scoped>
.ll-divide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
}
.ll-modal-body {
	&-top {
		display: flex;
		justify-self: start;
		margin-bottom: 12px;
		.order-item {
			font-size: 14px;
			color: #333333;
			margin-right: 32px;
			.ll-title {
				color: #666666;
			}
		}
	}
	&-main {
		max-height: 560px;
		overflow-y: auto;
	}
}

.ll-card {
	border-radius: 4px;
	border: 1px solid #f0f0f0;
	min-height: 218px;
	padding: 16px;
	background: #f0f0f0;
	box-sizing: border-box;
	margin-bottom: 8px;
	&:last-child {
		margin-bottom: 16px;
	}
	&-title {
		font-size: 16px;
		color: #333333;
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}
}

.ll-list-item {
	margin-bottom: 12px;
	font-size: 14px;
	color: #333333;
	display: flex;
	&:last-child {
		margin-bottom: 0;
	}
	&-title {
		color: #666666;
		display: inline-block;
		width: 76px;
		text-align: right;
	}
}
.ll-change {
	color: #1d6fe9;
	margin-left: 8px;
	cursor: pointer;
}

.timeline-content {
	p {
		margin-bottom: 5px;
	}
	.subTitle {
		color: #999;
		font-size: 12px;
	}
}
</style>
